<template>
	<view>
	<view class="content">
  <view class="header-open-list">
				<view class="item">
          <view class="title">中国影院 </view>
          <view class="t-content">重庆沙坪坝区天陈路1号，炫地购物中心4-7楼</view>
           <view class="next-txt">
             <text class="tiptxt">IMAX</text><text class="tiptxt-lv">4D厅</text> 
             <image class="imgb" src="../../static/kaitong.png" />
             </view>
          <view class="distance">3.1km</view>
          <view class="b-line" />
				</view>
		</view>

      <view class="detail-wrap">
          <swiper @change="cardSwiper" 
              :indicator-dots="false" 
              :circular="false" 
              :autoplay="false" 
              :interval="5000" 
              :duration="500" 
              :indicator-color="'#8799a3'" 
              :indicator-active-color="'#0081ff'" 
              class="cardSwiper">
            <swiper-item class="swiper-list-item" v-for="(item,index) in swiperList" :class="{cur:cardCur==index}" :key="index">
              <view class="swiper-view">
                <image :src="item.url" class="scoll-img" />
              </view>
            </swiper-item>
        </swiper> 
        <view class="dy-title"> {{swiperList[cardCur].title}}</view>
        <view class="dy-content"> {{swiperList[cardCur].content}}</view>
       </view>
			<view class="f-tab">
				<view class="item" v-for="(item,index) in areaList" :class="{on:tabType===item}" @click="changeTab(item)" :key="index">
          周{{item}} 
            <view  class="time">12-{{item}}</view>
            <view class="tb-line" />
         </view>
			</view>
      <view class="open-user-vip">
        开通权益可享受全年无限次免费观影
        <text class="open-text">前往开通 </text> 
      </view>
			<view class="s-list">
				<view class="item" v-for="(item,index) in areaList" :key="index">
          <view class="title">10:00 </view>
          <view class="t-content">12:00 散场</view>
          <view class="type">国语 </view>  
          <view class="hall">一号厅</view>
          <view class="price-box">
            <text class="old">￥50</text> <text class="new">￥45</text>
          </view>
          <view class="distance" @click="btnBuy(item)">购买</view>
          <view class="b-line" />
				</view>
		</view>
		</view>
	</view>
</template>
<script>
import iconArrow from '../components/icon-arrow';
	export default {
	components: {
		iconArrow
  },
		data() {
			return {
				captchaImg:'',
				tabType:1,
        areaList:[1,2,3,4],
        background: ['color1', 'color2', 'color3'],
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500,
      dotStyle:'',
      cardCur: 0, 
    swiperList: [{
      id: 0,
      title:'中国万岁',
      content:'100分钟 讲述的是一个哈子的爱国故事',
      url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575888496889&di=1dae4267e7021c099d79a7ada5c76f19&imgtype=0&src=http%3A%2F%2Fwww.zhizhunjiazheng.com%2Fedit%2Fuploadfile%2F20163%2F2016-3-5-14-20-28.jpg'
    }, {
      id: 1,
      title:'放牛的春天',
      content:'120分钟 他们都是娃儿....',
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',
    }, {
      id: 2,
      title:'维修工程师的故事',
      content:'120分钟 维修家庭家电加水呵呵呵呵',
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
    }, {
      id: 3,
      title:'维修工程师的故事1',
      content:'120分钟 维修家庭家电加水呵呵呵呵',
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
    }, {
      id: 4,
      title:'维修工程师的故事2',
      content:'120分钟 维修家庭家电加水呵呵呵呵',
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
    }, {
      id: 5,
      title:'维修工程师的故事3',
      content:'120分钟 维修家庭家电加水呵呵呵呵',
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
    }, {
      id: 6,
      title:'维修工程师的故事4',
      content:'120分钟 维修家庭家电加水呵呵呵呵',
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
    }],
			}
		},
		onLoad() {
		},
		methods: {
		cardSwiper(e) {
      let self = this;
      self.cardCur = e.detail.current;
      console.log(e,'----')
		},
      btnBuy(item){
				uni.redirectTo({
          url: '/pages/index/seat',
        });
        
      },
			changeTab(type){
				this.tabType = type;
      }
		}
	}
</script>

<style  lang="scss" scoped>
.maxpage{
    height: px2vw(100);
  width: 100vw;
  border: px2vw(2) solid red;
}
.max{
  height: px2vw(100);
width: 100vw;
 border: px2vw(2) solid #000;
}
.content{
	overflow-y:scroll;
  height: 100vh;
  -webkit-overflow-scrolling: touch;
}
.cardSwiper {
  height: px2vw(150) !important;
  width:100vw !important;
}
.swiper-list-item {
  width: px2vw(100) !important;
  left: px2vw(140);
  box-sizing: border-box;
  padding: px2vw(10) 0 px2vw(10);
  text-align: center;
}
.swiper-view {
  width: px2vw(95);
  display: block;
  height: px2vw(105);
  border-radius: px2vw(10);
  transform: scale(0.9);
  transition: all 0.2s ease-in 0s;
  overflow: hidden;
  text-align: center;
  margin-top:px2vw(7);
}
.swiper-list-item.cur .swiper-view {
  transform: none;
  transition: all 0.2s ease-in 0s;
  border: px2vw(1) solid #eee;
  width: px2vw(95);
  height: px2vw(115);
  margin-top:px2vw(0);
}
.swiper-view .scoll-img {
  display: block;
  width: px2vw(95);
  height: px2vw(115);
  margin: 0;
  border-radius:  px2vw(10);
  pointer-events: none;
}
.detail-wrap{
  height: px2vw(203);
  width: 100vw;
  position: relative;
  background-image: linear-gradient(to right, #888 , #000);
  .dy-title{
    text-align: center;
    font-size: px2vw($fz16);
    color: #fff;
  }
  .dy-content{
    text-align: center;
    font-size: px2vw($fz12);
    color: #ddd;
    padding-top:px2vw(5);
    width: px2vw(350);
    margin: 0 auto;
  }
}
	.f-tab{
	  	display: flex;
			width: px2vw(375);
			position: relative;
      margin: 0 auto px2vw(6) auto;
      border-top:  px2vw(10) solid #f5f5f5;
      .f-btn{
        font-size: px2vw($fz14);
        height:  px2vw(30);
			  line-height:  px2vw(30);
        margin-left: px2vw(10); 
        margin-right: px2vw(35);
        .arrow{
          margin-left: px2vw(5); 
        }
      }
		.item{
			padding:  px2vw(10) 0;
			font-size: px2vw($fz14);
			font-weight: 600;
			color: #808080;
      width: px2vw(60);
      text-align: center;
      position: relative;
      .time{
       	font-size: px2vw($fz12);
			  color: #808080;
        font-weight: normal;
      }
      .tb-line{
        background-color: #F24244;
        height: px2vw(3);
        width: px2vw(20);
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: - px2vw(10);
        border-radius: px2vw(5);
        display: none;
      }
		}
		.on{
			color: #000;
      .tb-line{
        display: block;
      }
		}
		.c-line-item{
			padding: 0 px2vw(10);
			border-right: px2vw(0.5) solid #ddd;
			height:  px2vw(60);
		}
	}
   .open-user-vip{
     height: px2vw(35);
     line-height: px2vw(35);
     padding-left: px2vw(20);
     background-color: #FFF2DF;
     font-size: px2vw($fz12);
     color: #000;
     position: relative;
     .open-text{
        color:#F35759;  
        font-size: px2vw($fz12);
        position: absolute;
        right: px2vw(20);
     }
   }
	.s-list{
			width: px2vw(355);
			margin: px2vw(10) 0 px2vw(30) auto;
			.item{
						height: px2vw(86);
						width: 100%;
						position: relative;
						color: #000;
						 .title{
							 font-size: px2vw($fz18);
							 padding-top: px2vw(18);
						 }
            .t-content{
              font-size: px2vw($fz14);
              color: #888;
              padding-top: px2vw(10);
            }
            .type, 
            .hall{
              position: absolute;
							top:  px2vw(18);
              height:  px2vw(32);
              line-height:  px2vw(32);
              font-size: px2vw($fz18);
              left:  px2vw(110);
            }
            .hall{
	              top:  px2vw(45);
                font-size: px2vw($fz14);
                color: #888;
            }
            .price-box{
              position: absolute;
							top:  px2vw(30);
              height:  px2vw(32);
              line-height:  px2vw(32);
              font-size: px2vw($fz13);
              left:  px2vw(180);
              .old{
                color: #878787;
                text-decoration: line-through;
              }
              .new{
                color: #F24244;
                font-size: px2vw($fz18);
                padding-left: px2vw(10);
              }
            }
            .distance{
              position: absolute;
							top: 50%;
              height:  px2vw(32);
              line-height:  px2vw(32);
							right: px2vw(16);
              width: px2vw(60);
              font-size: px2vw($fz14);
              margin-top: -  px2vw(16);
              color: #F24244;
              text-align: center;
              border: px2vw(1) solid #F24244;
              border-radius: px2vw(20);
            }
						.b-line{
							border: px2vw(0.5) solid #eee;
							position: absolute;
							bottom: 0;
							right: 0;
							width: px2vw(360);
						}
				}
  }
  
  	.header-open-list{
			width: px2vw(375);
			margin: px2vw(10) 0 0 auto;
			.item{
						height: px2vw(116);
						width: 100%;
            position: relative;
            text-indent: px2vw(15);
						color: #000;
						 .title{
							 font-size: px2vw($fz18);
							 padding-top: px2vw(18);
             }
             .next-txt{
               padding-top: px2vw(8);
               	.tiptxt{
								 font-size: px2vw($fz12);
								 border:px2vw(1) solid #F24244;
								 color: #F24244;
								 padding:px2vw(1) px2vw(6);
								 border-radius: px2vw(2);
								 vertical-align: middle;
								 margin-right: px2vw(6);
							 }
               .tiptxt-lv{
								 font-size: px2vw($fz12);
								 border:px2vw(1) solid #4194FB;
								 color: #4194FB;
								 padding:px2vw(1) px2vw(6);
								 border-radius: px2vw(2);
								 vertical-align: middle;
								 margin-right: px2vw(6);
               }
               .imgb{
                 height: px2vw(20);
                 width: px2vw(200);
                 vertical-align: middle;
               }
             }
            .t-content{
              font-size: px2vw($fz14);
              color: #888;
              padding-top: px2vw(10);
            }
            .distance{
              position: absolute;
							top: 50%;
              height:  px2vw(20);
              line-height:  px2vw(20);
							right: px2vw(26);
              font-size: px2vw($fz14);
              margin-top: -  px2vw(20);
              color: #333;
            }
						.b-line{
							border: px2vw(0.5) solid #eee;
							position: absolute;
							bottom: 0;
							right: 0;
							width: px2vw(360);
						}
				}
	}
</style>
